<template>
  <div class="customer-table-box">
    <button v-if="isEdit" class="add-btn" @click="addPayer">添加付款人<i class="el-icon-plus el-icon--right"/></button>
    <dynamicEditTable
      v-loading="loading"
      ref="dynamicPayerTable"
      v-model="payerData"
      :list-setting="payerSetting"
      :list-data="setLogText(payerData)"
      :list-data-count="payerDataCount"
      :is-edit="isEdit"
      :empty-text="empty"
      :show-table-header="showTableHeader"
      :show-serial="false"
      :show-add-btn="false"
      :show-copy-btn="false"
      :show-disable-btn="true"
      :can-empty="true"
      :has-border="false"
      :row-del-auth="true"
      :row-del-auth-str="'crm:customer:deletePayer'"
      :del-tip-str="'请确定是否删除该付款人'"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @delRowData="delPayer"
      @scrollSelectChange="scrollSelectChange"
    />
  </div>
</template>

<script>
import dynamicEditTable from '@/components/Common/dynamicEditTable';
import { payerSetting } from '../data';
import { arrRepeat } from '@/utils/tools';

export default {
  name: 'PayerTable',
  components: {
    dynamicEditTable
  },
  model: {
    prop: 'payerData',
    event: 'changeValue'
  },
  props: {
    payerData: {
      type: Array,
      default() {
        return [];
      }
    },
    payerDataCount: {
      type: Number,
      default: 0
    },
    isEdit: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    empty: {
      type: String,
      default: '暂无数据'
    },
    showTableHeader: {
      type: Boolean,
      default: true
    },
    orderPrivateId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      payerSetting
    };
  },
  methods: {
    arrRepeat,
    setLogText(arr) {
      if (!this.isEdit) {
        arr.forEach(i => {
          i._logText = `销售客户中付款人名称${i.name}的付款账号`;
        });
      }
      return arr;
    },
    validate() {
      return this.$refs.dynamicPayerTable.validate();
    },
    addPayer() {
      const curPayer = {
        name: '',
        status: 0,
        account: '',
        validTime: '',
        isAdd: true,
        orderPrivateId: this.orderPrivateId + 1
      };
      this.$emit('orderPrivateIdChange', this.orderPrivateId + 1);
      this.payerData.unshift(curPayer);
      this.$emit('changeValue', this.payerData);
    },
    setFirstSelectTag() {
      this.$nextTick(() => {
        this.$refs['dynamicPayerTable'].firstInitPanel = true;
      });
    },
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val);
    },
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val);
    },
    delPayer(val) {
      this.$emit('delPayer', val);
    },
    scrollSelectChange(key, data, rowIndex) {
      const index = this.payerData.findIndex(el => el.orderPrivateId === data.orderPrivateId);
      delete data.orderPrivateId;
      if (index !== -1) {
        this.$set(this.payerData[index], 'associateList', [...data]);
      }
      // 选择协作人自动填充人员的子部门为协作部门
      if (data && data.length) {
        // 拼接用户的子级部门，还要去重
        let temp = [];
        data.forEach(item => {
          temp = temp.concat(item.currentDepartment);
        });
        const res = this.arrRepeat(temp);
        const resId = res.map(item => {
          return item.id;
        });
        this.$set(this.payerData[rowIndex], 'coDepartment', resId);
        const resName = res.map(item => {
          return item.name;
        }).join();
        this.$set(this.payerData[rowIndex], 'coDepartmentName', resName);
      } else {
        this.$set(this.payerData[rowIndex], 'coDepartment', []);
        this.$set(this.payerData[rowIndex], 'coDepartmentName', '');
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.add-btn {
  border-radius: 4px;
}
</style>
